<template>
  <div class="positive-reviews-component">
    <div class="positive-reviews-title">
      Positive Reviews/ <span>{{ totalReviews }}</span>
    </div>
    <ul class="positive-reviews-list">
      <li v-for="(review, index) in positiveReviews" :key="index">
        <div class="review-item">
          <div class="review-name">{{ review.name }}</div>
          <div class="review-score">{{ review.score }}</div>
        </div>
        <!-- 将百分比绑定到review.score -->
        <el-progress
          :percentage="review.score"
          :show-text="false"
        ></el-progress>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    positiveReviews: {
      type: Array,
      required: true,
      validator: (list) =>
        list.every(
          (item) =>
            typeof item.name === "string" && typeof item.score === "number"
        ),
    },
  },
  computed: {
    totalReviews() {
      return this.positiveReviews.length;
    },
  },
  mounted() {
    console.log("当前分类的评价数据:", this.positiveReviews); // 验证数据是否正确
  },
};
</script>

<style scoped lang="scss">
/* 样式保持不变 */
.positive-reviews-component {
  border: 1px solid #dbdbdb;
  border-radius: 16px;
  margin-top: 8px;
  padding: 24px;
  .positive-reviews-title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    .positive-reviews-title span {
      font-size: 16px;
      font-weight: 400;
    }
  }
  .positive-reviews-list {
    padding: 0; // 移除默认的左侧内边距
    margin: 0; // 移除默认的外边距

    li {
      list-style: none;
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0; // 移除最后一个li的底部边距
      }
      .review-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
      }
    }
    .positive-reviews-list li:not(:last-child) {
      margin-bottom: 16px; // 非最后一个 li 元素添加底部边距
    }
  }
}
</style>
